<template>
    <el-form
      ref="loginForm"
      :model="loginFormData"
      status-icon
      :rules="commonRules"
      label-width="120px"
      class="demo-loginFormData"
    >
    <!-- 用户名 -->
      <el-form-item label="用户名" prop="username" class="username-form-item">
        <el-input v-model="loginFormData.username" type="input" autocomplete="off" />
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="密码" prop="password" class="password-form-item">
        <el-input
          v-model="loginFormData.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item label="验证码" prop="captcha" class="captcha-form-item">
        <el-input v-model="loginFormData.captcha" />
        <div class="yzm" v-html="captcha" @click="getCaptcha"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(loginForm)">提交</el-button>
      </el-form-item>
    </el-form>
</template>
<script setup>

  // 引入接口
  import * as api from "@/api/users.js"
  import { reactive, ref,onMounted } from 'vue'
  //引入校验函数
  import {commonRules,useSubmitForm} from "../../composition/login/validate"


  //表单校验成功之后，回调的方法
  let validateSuccess = () => {
    console.log("校验成功")
}

  //表单校验成功之后，回调的方法
  let validateFailed = () => {
    console.log("校验失败")
  }

  //使用submitForm

  let submitForm = useSubmitForm(validateSuccess,validateFailed)

  const loginForm = ref()

  //注入到表单的数据

  const loginFormData = reactive({
    username: '',
    password: '',
    captcha: '',
  })
  
  // 声明一个展示验证码的响应式变量
  let captcha = ref()

  // 获取验证码
 let getCaptcha = async() => {
    let res =await api.getCaptchaApi()
    if(res.data.state) captcha.value = res.data.img
 }

//  首次页面加载调用
onMounted(()=>{
  getCaptcha()
})
  
  </script>